<!DOCTYPE html>
<html lang="en">
<head>        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    
    <!--[if gt IE 8]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <![endif]-->        
    
    <title>Widgets - Virgo Responsive Bootstrap3 Admin Template</title>
    
    <link href="css/stylesheets.css" rel="stylesheet" type="text/css" />      
    <!--[if lt IE 10]>
        <link href="css/ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->        
    <link rel="icon" type="image/ico" href="favicon.ico"/>
    
    <script type='text/javascript' src='js/plugins/jquery/jquery.min.js'></script>
    <script type='text/javascript' src='js/plugins/jquery/jquery-ui-1.10.1.custom.min.js'></script>
    <script type='text/javascript' src='js/plugins/jquery/jquery-migrate-1.1.1.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/jquery/globalize.js'></script>
    <script type='text/javascript' src='js/plugins/other/excanvas.js'></script>
    
    <script type='text/javascript' src='js/plugins/other/jquery.mousewheel.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/bootstrap/bootstrap.min.js'></script>            
    
    <script type='text/javascript' src='js/plugins/cookies/jquery.cookies.2.2.0.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/fancybox/jquery.fancybox.pack.js'></script>
    
    <script type='text/javascript' src='js/plugins/jflot/jquery.flot.js'></script>    
    <script type='text/javascript' src='js/plugins/jflot/jquery.flot.stack.js'></script>    
    <script type='text/javascript' src='js/plugins/jflot/jquery.flot.pie.js'></script>
    <script type='text/javascript' src='js/plugins/jflot/jquery.flot.resize.js'></script>
    
    <script type='text/javascript' src='js/plugins/epiechart/jquery.easy-pie-chart.js'></script>
    <script type='text/javascript' src='js/plugins/knob/jquery.knob.js'></script>
    
    <script type='text/javascript' src='js/plugins/sparklines/jquery.sparkline.min.js'></script>    
    
    <script type='text/javascript' src='js/plugins/pnotify/jquery.pnotify.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/fullcalendar/fullcalendar.min.js'></script>        
    
    <script type='text/javascript' src='js/plugins/datatables/jquery.dataTables.min.js'></script>    
    
    <script type='text/javascript' src='js/plugins/wookmark/jquery.wookmark.js'></script>        
    
    <script type='text/javascript' src='js/plugins/jbreadcrumb/jquery.jBreadCrumb.1.1.js'></script>
    
    <script type='text/javascript' src='js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js'></script>
    
    <script type='text/javascript' src="js/plugins/uniform/jquery.uniform.min.js"></script>
    <script type='text/javascript' src="js/plugins/select/select2.min.js"></script>
    <script type='text/javascript' src='js/plugins/tagsinput/jquery.tagsinput.min.js'></script>
    <script type='text/javascript' src='js/plugins/maskedinput/jquery.maskedinput-1.3.min.js'></script>
    <script type='text/javascript' src='js/plugins/multiselect/jquery.multi-select.min.js'></script>    
    
    <script type='text/javascript' src='js/plugins/validationEngine/languages/jquery.validationEngine-en.js'></script>
    <script type='text/javascript' src='js/plugins/validationEngine/jquery.validationEngine.js'></script>        
    <script type='text/javascript' src='js/plugins/stepywizard/jquery.stepy.js'></script>
        
    <script type='text/javascript' src='js/plugins/animatedprogressbar/animated_progressbar.js'></script>
    <script type='text/javascript' src='js/plugins/hoverintent/jquery.hoverIntent.minified.js'></script>
    
    <script type='text/javascript' src='js/plugins/media/mediaelement-and-player.min.js'></script>    
        
    <script type='text/javascript' src='js/plugins/cleditor/jquery.cleditor.js'></script>
    
    <script type='text/javascript' src='js/plugins/shbrush/XRegExp.js'></script>
    <script type='text/javascript' src='js/plugins/shbrush/shCore.js'></script>
    <script type='text/javascript' src='js/plugins/shbrush/shBrushXml.js'></script>
    <script type='text/javascript' src='js/plugins/shbrush/shBrushJScript.js'></script>
    <script type='text/javascript' src='js/plugins/shbrush/shBrushCss.js'></script>
    
    <script type='text/javascript' src='js/plugins/filetree/jqueryFileTree.js'></script>        
    
    <script type='text/javascript' src='js/plugins/slidernav/slidernav-min.js'></script>    
    <script type='text/javascript' src='js/plugins/isotope/jquery.isotope.min.js'></script>    
    <script type='text/javascript' src='js/plugins/jnotes/jquery-notes_1.0.8_min.js'></script>
    <script type='text/javascript' src='js/plugins/jcrop/jquery.Jcrop.min.js'></script>
    <script type='text/javascript' src='js/plugins/ibutton/jquery.ibutton.min.js'></script>

    <script type='text/javascript' src='js/plugins/scrollup/jquery.scrollUp.min.js'></script>    
    
    <script type='text/javascript' src='js/plugins.js'></script>
    <script type='text/javascript' src='js/charts.js'></script>
    <script type='text/javascript' src='js/actions.js'></script>
    
</head>
<body>
    
    <div class="header">
        <a href="index.html" class="logo"></a>
        
        <div class="buttons">
            <div class="popup" id="subNavControll">
                <div class="label"><span class="icos-list"></span></div>
            </div>
            <div class="dropdown">
                <div class="label"><span class="icos-user2"></span></div>
                <div class="body" style="width: 160px;">
                    <div class="itemLink">
                        <a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a>
                    </div>
                    <div class="itemLink">
                        <a href="#"><span class="glyphicon glyphicon-comment"></span> Messages</a>
                    </div>                    
                    <div class="itemLink">
                        <a href="#"><span class="glyphicon glyphicon-off"></span> Logoff</a>
                    </div>                                        
                </div>                
            </div>            
            <div class="popup">
                <div class="label"><span class="icos-search1"></span></div>
                <div class="body">
                    <div class="arrow"></div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">                    
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>                                    
                                    <input type="text" name="search" placeholder="Keyword..." class="form-control"/>
                                    <div class="input-group-btn">
                                        <button class="btn btn-default" type="button">Search</button>
                                    </div>
                                </div>                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="popup">
                <div class="label"><span class="icos-cog"></span></div>
                <div class="body">
                    <div class="arrow"></div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <span class="help-block">Themes:</span>
                                <div class="themes">
                                    <a href="#" data-theme="" class="tip" title="Default"><img src="img/themes/default.jpg"/></a>                                    
                                    <a href="#" data-theme="ssDaB" class="tip" title="DaB"><img src="img/themes/dab.jpg"/></a>
                                    <a href="#" data-theme="ssTq" class="tip" title="Tq"><img src="img/themes/tq.jpg"/></a>
                                    <a href="#" data-theme="ssGy" class="tip" title="Gy"><img src="img/themes/gy.jpg"/></a>
                                    <a href="#" data-theme="ssLight" class="tip" title="Light"><img src="img/themes/light.jpg"/></a>
                                    <a href="#" data-theme="ssDark" class="tip" title="Dark"><img src="img/themes/dark.jpg"/></a>
                                    <a href="#" data-theme="ssGreen" class="tip" title="Green"><img src="img/themes/green.jpg"/></a>
                                    <a href="#" data-theme="ssRed" class="tip" title="Red"><img src="img/themes/red.jpg"/></a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <span class="help-block">Backgrounds:</span>
                                <div class="backgrounds">
                                    <a href="#" data-background="bg_default" class="bg_default"></a>
                                    <a href="#" data-background="bg_mgrid" class="bg_mgrid"></a>
                                    <a href="#" data-background="bg_crosshatch" class="bg_crosshatch"></a>
                                    <a href="#" data-background="bg_hatch" class="bg_hatch"></a>                                    
                                    <a href="#" data-background="bg_light_gray" class="bg_light_gray"></a>
                                    <a href="#" data-background="bg_dark_gray" class="bg_dark_gray"></a>
                                    <a href="#" data-background="bg_texture" class="bg_texture"></a>
                                    <a href="#" data-background="bg_light_orange" class="bg_light_orange"></a>
                                    <a href="#" data-background="bg_yellow_hatch" class="bg_yellow_hatch"></a>                        
                                    <a href="#" data-background="bg_green_hatch" class="bg_green_hatch"></a>                        
                                </div>
                            </div>          
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <span class="help-block">Navigation:</span>
                                <input type="radio" name="navigation" id="fixedNav"/> Fixed 
                                <input type="radio" name="navigation" id="collapsedNav"/> Collapsible
                                <input type="radio" name="navigation" id="hiddenNav"/> Hidden
                            </div>                                
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        
    </div>
    
    <div class="navigation">

        <ul class="main">
            <li><a href="index.html"><span class="icom-screen"></span><span class="text">Main</span></a></li>
            <li><a href="#ui" class="active"><span class="icom-bookmark"></span><span class="text">UI elements</span></a></li>
            <li><a href="#forms"><span class="icom-pencil3"></span><span class="text">Forms stuff</span></a></li>
            <li><a href="#tables"><span class="icom-newspaper"></span><span class="text">Tables</span></a></li>
            <li><a href="#media"><span class="icom-videos"></span><span class="text">Media & Files</span></a></li>            
            <li><a href="#stats"><span class="icom-stats-up"></span><span class="text">Statistic</span></a></li>
            <li><a href="typography.html"><span class="icom-clipboard1"></span><span class="text">Typography</span></a></li>
            <li><a href="#samples"><span class="icom-box-add"></span><span class="text">Samples</span></a></li>
            <li><a href="#other"><span class="icom-star1"></span><span class="text">Other</span></a></li>            
        </ul>
        
        <div class="control"></div>        
        
        <div class="submain">                        

            <div id="default">
                
                <div class="widget-fluid userInfo clearfix">
                    <div class="image">
                        <img src="img/examples/users/dmitry.jpg" class="img-thumbnail"/>
                    </div>              
                    <div class="name">Welcom, Dmitry</div>
                    <ul class="menuList">
                        <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-comment"></span> Messages</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-share-alt"></span> Logoff</a></li>                        
                    </ul>
                    <div class="text">
                        Welcom back! Your last visit: 24.10.2012 in 19:55
                    </div>
                </div>
                
                <div class="widget-fluid TAC">
                    <div class="kchart">
                        <input type="text" class="knob" data-min="1" data-max="100" value="35" data-width="90" data-height="90" data-fgColor="#b84b48" data-readOnly="true" data-bgColor="#f7f8fa"/>
                        <div class="label label-danger">Free Space</div>
                    </div>                    
                    <div class="kchart">
                        <input type="text" class="knob" data-min="1" data-max="3000" value="1982" data-width="90" data-height="90" data-fgColor="#f89406" data-readOnly="true" data-bgColor="#f7f8fa"/>
                        <div class="label label-warning">Visits</div>
                    </div>                                                       
                </div>                
                <div class="dr"><span></span></div>
                <div class="widget">
                    <button class="btn btn-primary btn-block">Button block</button>
                </div>                
                <div class="widget">
                    <button class="btn btn-warning btn-block">Some another button</button>
                </div>
                <div class="dr"><span></span></div>
                <ul class="fmenu">
                    <li>
                        <a href="#">Submenu level 2</a>                        
                    </li>
                    <li>
                        <a href="#">Submenu level 2</a>
                        <span class="caption dark">5</span>
                        <ul>
                            <li><a href="#">Submenu level 3</a><span class="caption">1</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption red">2</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption green">3</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption orange">4</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption purple">5</span></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Submenu level 2</a>                        
                    </li>                    
                </ul>                
                <div class="dr"><span></span></div>
                <div class="menu">
                    <a href="#">Submenu 1</a>
                    <a href="#">Submenu 2</a>
                    <a href="#">Submenu 3</a>
                    <a href="#">Submenu 4</a>
                    <a href="#">Submenu 5</a>
                </div>
                <div class="dr"><span></span></div>
            </div>        
            
            <div id="ui">
                
                <div class="menu">
                    <a href="ui.html"><span class="glyphicon glyphicon-user"></span> Interface</a>
                    <a href="buttons.html"><span class="glyphicon glyphicon-chevron-right"></span> Buttons set</a>
                    <a href="widgets.html" class="active"><span class="glyphicon glyphicon-th-large"></span> Widgets</a>                    
                    <a href="icons.html"><span class="glyphicon glyphicon-fire"></span> Icons</a>
                    <a href="grid.html"><span class="glyphicon glyphicon-th"></span> Grid system</a>
                    <a href="dnd.html"><span class="glyphicon glyphicon-move"></span> Drug and drop</a>
                </div>                
                
                <div class="dr"><span></span></div>                
                <div class="widget">
                    <button class="btn btn-primary btn-block">Button block</button>
                </div>                
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="accordion">
                        <h3>Section 1</h3>
                        <div>
                            <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
                        </div>
                        <h3>Section 2</h3>
                        <div>
                            <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
                        </div>
                        <h3>Section 3</h3>
                        <div>
                            <ul>
                                <li>List item one</li>
                                <li>List item two</li>
                                <li>List item three</li>
                            </ul>                                
                            <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
                        </div>                            
                    </div>                
                </div>
                <div class="dr"><span></span></div>
                <div class="widget">
                    <span>Default:</span>
                    <div class="progress small">
                        <div class="progress-bar progress-bar-info tip" style="width: 30%;" data-original-title="30%"></div>
                    </div>                                
                    <span>Success:</span>
                    <div class="progress small">
                        <div class="progress-bar progress-bar-success tip" style="width: 50%;" data-original-title="50%"></div>
                    </div>
                    <span>Warning:</span>
                    <div class="progress small">
                        <div class="progress-bar progress-bar-warning tip" style="width: 70%;" data-original-title="70%"></div>
                    </div>       
                    <span>Danger:</span>
                    <div class="progress small">
                        <div class="progress-bar progress-bar-danger tip" style="width: 90%;" data-original-title="90%"></div>
                    </div>                                 
                </div>
                <div class="dr"><span></span></div>             
                
            </div>            
            
            <div id="forms">
                                                
                <div class="menu">
                    <a href="forms.html"><span class="glyphicon glyphicon-align-justify"></span> Form elements</a>
                    <a href="validation.html"><span class="glyphicon glyphicon-ok-sign"></span> Form validation</a>
                    <a href="wizard.html"><span class="glyphicon glyphicon-share"></span> Wizard</a>  
                    <a href="form_grid.html"><span class="glyphicon glyphicon-th"></span> Form grid system</a>
                    <a href="editor.html"><span class="glyphicon glyphicon-pencil"></span> Editors</a>
                    <a href="edit_image.html"><span class="glyphicon glyphicon-picture"></span> Image handling</a>
                </div>                                                
                
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="form-group">
                        <span>Text:</span>
                        <input type="text" placeholder="Placeholder example" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <input type="checkbox" checked="checked" value="1"/>Checked 
                        <input type="checkbox" value="2"/>Unchecked                         
                    </div>                    
                    <div class="form-group">                        
                        <select>
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                    </div>                    
                    <div class="form-group">
                        <span>Tags</span>
                        <input class="tags" value="PHP,CSS"/>
                    </div>
                    <div class="form-group">                        
                        <textarea name="text"></textarea>
                    </div>                    
                    <div class="form-group TAR">
                        <button class="btn btn-primary">Submit</button>
                    </div>
                </div>
                <div class="dr"><span></span></div>  
                
            </div>                        

            <div id="tables">
                                                
                <div class="menu">
                    <a href="tables.html"><span class="glyphicon glyphicon-align-justify"></span> Default tables</a>
                    <a href="dynamic_tables.html"><span class="glyphicon glyphicon-ok-sign"></span> Dynamic tables</a>                          
                </div>                                                
                
                <div class="dr"><span></span></div>                
                <div class="widget-fluid">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th width="50">ID</th>
                                <th>User</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>u-231</td>
                                <td><a href="#">Dmitry Ivaniuk</a></td>
                            </tr>
                            <tr>
                                <td>u-250</td>
                                <td><a href="#">Helen Symonchuk</a></td>
                            </tr>
                            <tr>
                                <td>u-256</td>
                                <td><a href="#">Olga Yukhimchuk</a></td>
                            </tr>                            
                            <tr>
                                <td>u-276</td>
                                <td><a href="#">Valentin Ratushev</a></td>
                            </tr>                                                        
                        </tbody>
                    </table>                    
                </div>
                <div class="dr"><span></span></div>                
                <div class="widget-fluid">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="checkall"/></th>
                                <th width="25%">ID</th>
                                <th width="75%">User</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-231</td>
                                <td><a href="#">Dmitry Ivaniuk</a></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-250</td>
                                <td><a href="#">Helen Symonchuk</a></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-256</td>
                                <td><a href="#">Olga Yukhimchuk</a></td>
                            </tr>                            
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-276</td>
                                <td><a href="#">Valentin Ratushev</a></td>
                            </tr>                                                        
                        </tbody>
                    </table>                    
                </div>  
                <div class="dr"><span></span></div>
                
            </div>             

            <div id="media">
                
                <div class="menu">
                    <a href="images.html"><span class="glyphicon glyphicon-picture"></span> Images</a>
                    <a href="videos.html"><span class="glyphicon glyphicon-film"></span> Videos</a>
                    <a href="files.html"><span class="glyphicon glyphicon-file"></span> File handling</a>                                                                           
                </div>                
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="head">File Tree</div>
                    <div id="fileTree"></div>
                </div>
                <div class="dr"><span></span></div>                
            </div>                          
            
            <div id="stats">
                
                <div class="menu">
                    <a href="charts.html"><span class="glyphicon glyphicon-signal"></span> Charts</a>                    
                    <a href="chart_widgets.html"><span class="glyphicon glyphicon-star"></span> Chart widgets</a>                       
                </div>                
                <div class="dr"><span></span></div>
                <div class="widget-fluid TAC">
                    <div class="kchart">
                        <input type="text" class="knob" data-min="1" data-max="100" value="85" data-width="90" data-height="90" data-fgColor="#b84b48" data-readOnly="true" data-bgColor="#f7f8fa"/>
                        <div class="label label-danger">Server load</div>
                    </div>                    
                    <div class="kchart">
                        <input type="text" class="knob" data-min="1" data-max="1024" value="256" data-width="90" data-height="90" data-fgColor="#f89406" data-readOnly="true" data-bgColor="#f7f8fa"/>
                        <div class="label label-warning">Used RAM</div>
                    </div>                              
                </div>
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="row">
                        <div class="col-md-6 TAC">
                            <span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkLineColor="#3f506a" sparkFillColor="#f7f8fa">1:3,2:4,3:3,3:4,4:2</span>
                        </div>
                        <div class="col-md-6 TAC">
                            <span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="bar" sparkBarColor="#b84b48">5,6,4,6,5,4,5,6,8,5,6</span>
                        </div>
                    </div>
                </div>
                <div class="widget-fluid">    
                    <div class="row">
                        <div class="col-md-6 TAC">
                            <span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="discrete" sparkLineColor="#f89406">5,6,4,6,5,4,5,6,8,5,6</span>
                        </div>
                        <div class="col-md-6 TAC">
                            <span class="mChartBar" sparkType="bullet" sparkWidth="100" sparkHeight="30" sparkPerformanceColor="#3f506a" sparkTargetColor="#b84b48">10,12,12,9,7</span>
                        </div>
                    </div>                                        
                </div>
                <div class="dr"><span></span></div>                
            </div>              
            
            <div id="samples">
                <div class="menu">
                    <a href="profile.html"><span class="glyphicon glyphicon-user"></span> User profile</a>
                    <a href="stream.html"><span class="glyphicon glyphicon-refresh"></span> Stream activity</a>
                    <a href="mailbox.html"><span class="glyphicon glyphicon-envelope"></span> Mailbox</a>
                    <a href="invoice.html"><span class="glyphicon glyphicon-list-alt"></span> Invoice</a>
                    <a href="gallery.html"><span class="glyphicon glyphicon-picture"></span> Gallery</a>
                    <a href="users.html"><span class="glyphicon glyphicon-align-justify"></span> Users list</a>
                    <a href="contacts.html"><span class="glyphicon glyphicon-book"></span> Contacts list</a>
                    <a href="faq.html"><span class="glyphicon glyphicon-question-sign"></span> FAQ</a>
                    <a href="user_edit.html"><span class="glyphicon glyphicon-pencil"></span> User edit</a>
                    <a href="search.html"><span class="glyphicon glyphicon-search"></span> Search</a>                                        
                </div>                
            </div>

            <div id="other">
                <div class="menu">
                    <a href="login.html"><span class="glyphicon glyphicon-off"></span> Login page</a>
                    <a href="error_403.html"><span class="glyphicon glyphicon-warning-sign"></span> Error 403 Forbidden</a>
                    <a href="error_404.html"><span class="glyphicon glyphicon-warning-sign"></span> Error 404 Not found</a>
                    <a href="error_503.html"><span class="glyphicon glyphicon-warning-sign"></span> Error 503 Service Unavailable</a>                
                </div>
                
                <div class="widget">
                    <div class="alert alert-block">                
                        <strong>Alert block!</strong> Click me!:P
                    </div>
                    <div class="alert alert-error">            
                        <strong>Oh snap!</strong> Change a few... 
                    </div>
                    <div class="alert alert-success">            
                        <strong>Well done!</strong> Successfully...
                    </div>            
                    <div class="alert alert-info">            
                        <strong>Heads up!</strong> This alert...
                    </div>                  
                </div>
            </div>         
            
        </div>

    </div>
    
    <div class="breadCrumb clearfix">    
        <ul id="breadcrumbs">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">UI</a></li>
            <li>Widgets</li>
        </ul>        
    </div>
    
    <div class="content">
        
        <div class="row">         
            
            <div class="middle">

                <div class="informer">
                    <a href="#">
                        <span class="icomg-cog"></span>
                        <span class="text">Settings</span>
                    </a>
                    <span class="caption">!</span>
                </div>

                <div class="informer">
                    <a href="#">
                        <span class="icomg-stats-up"></span>
                        <span class="text">Statistic</span>
                    </a>
                    <span class="caption purple">+343</span>
                </div>

                <div class="informer">
                    <a href="#">
                        <span class="icomg-comments3"></span>
                        <span class="text">Comments</span>                        
                    </a>
                    <span class="caption green">+15</span>
                </div>                
                
                <div class="informer">
                    <a href="#">
                        <span class="title">98%</span>
                        <span class="text">Free Disk space</span>                        
                    </a>
                    <span class="caption orange">+14%</span>
                </div>                

                <div class="informer">
                    <a href="#">
                        <span class="title">$2,534</span>
                        <span class="text">Balance</span>
                    </a>
                    <span class="caption red">-$135</span>
                </div>               
            
            </div>
    
        </div>
        
        <div class="row">
            
            <div class="col-md-6">
                
                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-star3"></i></div>
                        <h2>Tickets</h2>
                        <ul class="buttons">                                                        
                            <li><a href="#"><span class="icos-cog"></span></a></li>
                        </ul>                          
                    </div>
                    
                    <div class="block-fluid">

                        <ul class="list tickets">
                            <li class="new clearfix" id="T212">
                                <div class="title">
                                    <a href="#">Product info</a>
                                    <p>Promble with order of pictures...</p>
                                </div>
                                <div class="actions">
                                    <a href="#" class="icon-button tip" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a> 
                                    <a href="#" class="icon-button remove tip" title="Remove"><span class="glyphicon glyphicon-remove"></span></a>
                                </div>
                            </li>
                            <li class="accept clearfix" id="T213">
                                <div class="title">
                                    <a href="#">Request backup</a>
                                    <p>Plese send me backup from 24/11/2012...</p>
                                </div>
                                <div class="actions">
                                    <a href="#" class="icon-button tip" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a> 
                                    <a href="#" class="icon-button remove tip" title="Remove"><span class="glyphicon glyphicon-remove"></span></a>
                                </div>
                            </li>
                            <li class="accept clearfix" id="T214">
                                <div class="title">
                                    <a href="#">Sign in button</a>
                                    <p>Doesnt send post requset to server...</p>
                                </div>
                                <div class="actions">
                                    <a href="#" class="icon-button tip" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a> 
                                    <a href="#" class="icon-button remove tip" title="Remove"><span class="glyphicon glyphicon-remove"></span></a>
                                </div>
                            </li>
                            <li class="done clearfix" id="T215">
                                <div class="title">
                                    <a href="#">Send email using HTML</a>
                                    <p>Some characters are deleted from the template...</p>
                                </div>
                                <div class="actions">
                                    <a href="#" class="icon-button tip" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a> 
                                    <a href="#" class="icon-button remove tip" title="Remove"><span class="glyphicon glyphicon-remove"></span></a>
                                </div>
                            </li>                        
                            <li class="done clearfix" id="T216">
                                <div class="title">
                                    <a href="#">Print form</a>
                                    <p>When you click on "print form" it displays an error...</p>
                                </div>
                                <div class="actions">
                                    <a href="#" class="icon-button tip" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a> 
                                    <a href="#" class="icon-button remove tip" title="Remove"><span class="glyphicon glyphicon-remove"></span></a>
                                </div>
                            </li>                                                    
                        </ul>                        
                        
                    </div>                    
                </div>

                <div class="widget">
                    <div class="profile clearfix">
                        <div class="image">
                            <img src="img/examples/users/dmitry_b.jpg" class="img-thumbnail"/>
                        </div>                        
                        <div class="info">
                            <h2>Dmitry Ivaniuk</h2>
                            <p><strong>Profile:</strong> Aqvatarius</p>
                            <p><strong>Address:</strong> 44 Revutskogo, Kiev, Ukraine</p>
                            <p><strong>Profession:</strong> Web Developer</p>
                            <div class="status">Administrator</div>
                        </div>
                        <div class="stats">
                            <div class="item">
                                <div class="title">129</div>
                                <div class="descr">Files</div>                                
                            </div>                            
                            <div class="item">
                                <div class="title">38</div>
                                <div class="descr">Stories</div>                                
                            </div>                                                        
                            <div class="item">
                                <div class="title">45</div>
                                <div class="descr">Followers</div>
                            </div>
                            <div class="item">
                                <div class="title">14</div>
                                <div class="descr">Following</div>                                
                            </div>                            
                        </div>
                    </div>
                </div>                
                
                <div class="widget">
                    
                    <div class="head dark">
                        <div class="icon"><i class="icos-comments"></i></div>
                        <h2>Comments</h2>
                        <ul class="buttons">                                                        
                            <li><a href="#"><span class="icos-refresh"></span></a></li>
                        </ul>                          
                    </div>
                    
                    <div class="block messages">
                        
                        <div class="item" id="comment_1">
                            <div class="image">
                                <img src="img/examples/users/dmitry.jpg" class="img-thumbnail"/>
                            </div>
                            <div class="date">14:55</div>
                            <div class="text">
                                <a href="#">Dmitry</a>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                            </div>
                            <div class="rating" id="rate_comment_id_1">
                                <a href="#" class="star active tip" title="1"></a>
                                <a href="#" class="star tip" title="2"></a>
                                <a href="#" class="star tip" title="3"></a>
                                <a href="#" class="star tip" title="4"></a>
                                <a href="#" class="star tip" title="5"></a>
                            </div>
                            <div class="actions">                                
                                <a href="#"><span class="glyphicon glyphicon-share-alt"></span></a>
                                <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
                                <a href="#"><span class="glyphicon glyphicon-remove"></span></a>
                            </div>
                        </div>
                        
                        <div class="item" id="comment_4">
                            <div class="image">
                                <img src="img/examples/users/helen.jpg" class="img-thumbnail"/>
                            </div>
                            <div class="date">13:55</div>
                            <div class="text">
                                <a href="#">Helen</a>
                                <p>Nulla vel metus scelerisque ante sollicitudin commodo. Cras sit amet nibh libero, in gravida nulla. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                            </div>
                            <div class="rating" id="rate_comment_id_4">
                                <a href="#" class="star active tip" title="1"></a>
                                <a href="#" class="star active tip" title="2"></a>
                                <a href="#" class="star active tip" title="3"></a>
                                <a href="#" class="star tip" title="4"></a>
                                <a href="#" class="star tip" title="5"></a>
                            </div>                            
                            <div class="actions">                                
                                <a href="#"><span class="glyphicon glyphicon-share-alt"></span></a>
                                <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
                                <a href="#"><span class="glyphicon glyphicon-remove"></span></a>                                
                            </div>                            
                        </div>                         

                        <div class="item" id="comment_5">
                            <div class="image">
                                <img src="img/examples/users/alexey.jpg" class="img-thumbnail"/>
                            </div>
                            <div class="date">13:50</div>
                            <div class="text">
                                <a href="#">Alex</a>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                            </div>
                            <div class="rating" id="rate_comment_id_5">
                                <a href="#" class="star active tip" title="1"></a>
                                <a href="#" class="star active tip" title="2"></a>
                                <a href="#" class="star active tip" title="3"></a>
                                <a href="#" class="star active tip" title="4"></a>
                                <a href="#" class="star active tip" title="5"></a>
                            </div>                            
                            <div class="actions">                                
                                <a href="#"><span class="glyphicon glyphicon-share-alt"></span></a>
                                <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
                                <a href="#"><span class="glyphicon glyphicon-remove"></span></a>                                
                            </div>                            
                        </div>                         
                        
                    </div>
                    
                </div>
                

                <div class="widget">
                    
                    <div class="head dark">
                        <div class="icon"><i class="icos-comments2"></i></div>
                        <h2>Messaging</h2>      
                        <ul class="buttons">                                                        
                            <li><a href="#"><span class="icos-plus1"></span></a></li>
                        </ul>                                                  
                    </div>
                    <div class="toolbar">
                        <div class="user">
                            <img src="img/examples/users/dmitry_m.jpg" class="img-thumbnail"/> <a href="#">Dmitry</a>
                        </div>
                        <div class="user">
                            <img src="img/examples/users/alexey_m.jpg" class="img-thumbnail"/> <a href="#">Alex</a>
                        </div>                            
                    </div>
                    <div class="block messaging">                        
                        
                        <div class="item">
                            <div class="image">                                
                                <img src="img/examples/users/dmitry.jpg" class="img-thumbnail"/>
                            </div>           
                            <div class="date">20:43</div>
                            <div class="text">
                                <a href="#">Dmitry</a>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                            </div>                            
                        </div>                         

                        <div class="item out">
                            <div class="image">
                                <img src="img/examples/users/alexey.jpg" class="img-thumbnail"/>
                            </div>                            
                            <div class="date">20:30</div>
                            <div class="text">
                                <a href="#">Alex</a>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                            </div>                            
                        </div>
                        
                        <div class="item">
                            <div class="image">
                                <img src="img/examples/users/dmitry.jpg" class="img-thumbnail"/>
                            </div>                            
                            <div class="date">20:10</div>
                            <div class="text">
                                <a href="#">Dmitry</a>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                            </div>                            
                        </div>                        
                        
                    </div>
                    <div class="toolbar bottom">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button class="btn btn-default tip" title="Add photo" type="button"><span class="glyphicon glyphicon-picture"></span></button>
                                <button class="btn btn-default tip" title="Add video" type="button"><span class="glyphicon glyphicon-film"></span></button>
                            </div>
                            <input type="text" class="form-control"/>
                            <div class="input-group-btn">
                                <button class="btn btn-primary" type="button">Send</button>
                            </div>
                        </div>
                    </div>
                </div>                
                
                
            </div>
            
            <div class="col-md-6">

                <div class="widget">
                    <div class="wrapper">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>                            
                            <input type="text" class="form-control"/>
                            <div class="input-group-btn">
                                <button class="btn btn-primary" type="button">Search</button>
                                <button class="btn btn-primary" type="button">Advanced</button>
                            </div>
                        </div>             
                    </div>
                </div>
                
                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-user3"></i></div>
                        <h2>Events</h2>
                        <ul class="buttons">                                                        
                            <li><a href="#"><span class="icos-calendar"></span></a></li>
                        </ul>                                                  
                    </div>                    
                    <div class="block-fluid events">
                        
                        <div class="item">
                            <div class="date">
                                <div class="caption"><span class="glyphicon glyphicon-star"></span></div>
                                <span class="day">14</span>
                                <span class="month">Dec</span>
                            </div>
                            <div class="info">
                                <a href="#">Upcoming event</a>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                                <div class="TAR">
                                    <button class="btn btn-default btn-sm">More</button>
                                </div>                                
                            </div>
                        </div>

                        <div class="item">
                            <div class="date">
                                <div class="caption green"><span class="glyphicon glyphicon-tags"></span></div>
                                <span class="day">16</span>
                                <span class="month">Dec</span>
                            </div>
                            <div class="info">
                                <a href="#">One more event</a>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                                <div class="TAR">
                                    <button class="btn btn-default btn-sm">More</button>
                                </div>                                
                            </div>
                        </div>                        
                        
                        <div class="item">
                            <div class="date">
                                <div class="caption red"><span class="glyphicon glyphicon-info-sign"></span></div>
                                <span class="day">25</span>
                                <span class="month">Dec</span>
                            </div>
                            <div class="info">
                                <a href="#">Important event</a>
                                <p>Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
                                <div class="TAR">
                                    <button class="btn btn-default btn-sm">More</button>
                                </div>
                            </div>
                        </div>                         
                        
                    </div>
                </div>
                
                <div class="widget">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="userCard">
                                <div class="image">
                                    <img src="img/examples/users/alexey.jpg" class="img-thumbnail"/>
                                </div>
                                <div class="info">
                                    <h3>Alexey</h3>
                                    <p><span class="glyphicon glyphicon-heart"></span> 2,195 <span class="glyphicon glyphicon-camera"></span> 121</p>
                                    <button class="btn btn-primary">Follow</button>
                                    <div class="informer">
                                        6,422
                                        <span>Followers</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="userCard">
                                <div class="image">
                                    <img src="img/examples/users/dmitry.jpg" class="img-thumbnail"/>
                                </div>
                                <div class="info">
                                    <h3>Dmitry</h3>
                                    <p><span class="glyphicon glyphicon-heart"></span> 4,326 <span class="glyphicon glyphicon-camera"></span> 222</p>
                                    <button class="btn btn-danger">Unfollow</button>
                                    <div class="informer">
                                        12,327
                                        <span>Followers</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>                    
                    
                </div>
                
                <div class="widget">
                    <div class="head">
                        <div class="icon"><i class="icosg-html5"></i></div>
                        <h2>Code preview</h2>
                    </div>
                    <div class="block-fluid">
                        <pre class="brush: js">
                            
                            $("#SomeId").someFuntion(function(){
                                $(this).someaction('Yeah!');
                              });
                            document.getElementById("SomeIDName").addEventListener('click',function(){
                                alert('Yeah');
                            },false);
                        </pre>
                    </div>
                </div>                
                
                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-bookmark"></i></div>
                        <h2>Contacts</h2>
                        <ul class="buttons">                                                        
                            <li><a href="#"><span class="icos-share"></span></a></li>
                        </ul>                                                  
                    </div> 
                    <div class="toolbar">
                        <div class="input-group">
                            <input type="text" placeholder="Keyword..." class="form-control"/>
                            <div class="input-group-btn">
                                <button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span></button>
                            </div>
                        </div>                          
                    </div>
                    <div class="block-fluid">
                        
                        <table cellpadding="0" cellspacing="0" width="100%" class="sTable">
                            <tbody>
                                <tr>
                                    <td width="100" align="center">
                                        <img src="img/examples/users/dmitry.jpg" class="img-thumbnail"/>                                                                    
                                        <address>
                                            <strong>Dmitry Ivaniuk</strong><br>
                                            <a href="mailto:#">dmitry@domain.com</a>
                                        </address>
                                    </td>
                                    <td width="70%">
                                        <address>
                                            <strong>Loremipsum, Inc.</strong><br>
                                            44 Dolorist, Suite 444<br>
                                            Core, CA 15212<br>
                                            <abbr title="Phone">P:</abbr> +98 (765) 432-1098
                                        </address>
                                    </td>
                                    <td width="30%">
                                        <span class="label label-success">Friends</span>
                                        <span class="label label-danger">Work</span>
                                    </td>
                                    <td width="30">
                                        <button class="btn btn-primary tipl" title="Send message"><span class="glyphicon glyphicon-envelope"></span></button>
                                        <button class="btn btn-primary tipl" title="Edit"><span class="glyphicon glyphicon-pencil"></span></button>
                                        <button class="btn btn-primary tipl" title="Remove"><span class="glyphicon glyphicon-remove"></span></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center">
                                        <img src="img/examples/users/olga.jpg" class="img-thumbnail"/>                                                                    
                                        <address>
                                            <strong>Olga Ivaniuk</strong><br>
                                            <a href="mailto:#">olga@domain.com</a>
                                        </address>
                                    </td>
                                    <td>
                                        <address>
                                            <strong>Loremipsum, Inc.</strong><br>
                                            44 Dolorist, Suite 444<br>
                                            Core, CA 15212<br>
                                            <abbr title="Phone">P:</abbr> +98 (765) 432-1097
                                        </address>
                                    </td>
                                    <td>
                                        <span class="label label-success">Friends</span>
                                        <span class="label label-info">Family</span>
                                    </td>                                
                                    <td>
                                        <button class="btn btn-primary tipl" title="Send message"><span class="glyphicon glyphicon-envelope"></span></button>
                                        <button class="btn btn-primary tipl" title="Edit"><span class="glyphicon glyphicon-pencil"></span></button>
                                        <button class="btn btn-primary tipl" title="Remove"><span class="glyphicon glyphicon-remove"></span></button>
                                    </td>
                                </tr>                            
                                <tr>
                                    <td align="center">
                                        <img src="img/examples/users/helen.jpg" class="img-thumbnail"/>                                                                    
                                        <address>
                                            <strong>Helen Symonchuk</strong><br>
                                            <a href="mailto:#">helen@domain.com</a>
                                        </address>
                                    </td>
                                    <td>
                                        <address>
                                            <strong>Loremipsum, Inc.</strong><br>
                                            45 Dolorist, Suite 555<br>
                                            Core, CA 15212<br>
                                            <abbr title="Phone">P:</abbr> +98 (765) 122-1587
                                        </address>
                                    </td>
                                    <td>
                                        <span class="label label-success">Friends</span>
                                        <span class="label label-warning">Classmates</span>
                                    </td>                                
                                    <td>
                                        <button class="btn btn-primary tipl" title="Send message"><span class="glyphicon glyphicon-envelope"></span></button>
                                        <button class="btn btn-primary tipl" title="Edit"><span class="glyphicon glyphicon-pencil"></span></button>
                                        <button class="btn btn-primary tipl" title="Remove"><span class="glyphicon glyphicon-remove"></span></button>
                                    </td>
                                </tr>  
                            </tbody>
                        </table>                       
                        
                    </div>
                    <div class="toolbar bottom">                        
                        <ul class="pagination pagination-sm">
                            <li class="disabled"><a href="#">&laquo;</a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li class="disabled"><span>...</span></li>                    
                            <li><a href="#">56</a></li>
                            <li><a href="#">57</a></li>
                            <li><a href="#">58</a></li>
                            <li><a href="#">59</a></li>                    
                            <li><a href="#">&raquo;</a></li>
                        </ul>                        
                    </div>                    
                </div>                
                
                
            </div>
                
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="widget">
                    <div class="head">
                        <div class="icon"><i class="icosg-menu"></i></div>
                        <h2>Custom scroll</h2>
                    </div>
                    <div class="block typography">
                        <div class="scroll" style="height: 100px;">                        
                            <a href="img/examples/photo/example_1.jpg" class="fb"><img src="img/examples/photo/example_1s.jpg" class="img-thumbnail" align="right"/></a> 
                            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure.</p>
                            <a href="img/examples/photo/example_7.jpg" class="fb"><img src="img/examples/photo/example_7s.jpg" class="img-thumbnail" align="left"/></a> 
                            <p>Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure.</p>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
        
        <div class="row">
            
            <div class="col-md-4">
                
                <div class="widget">
                    <div class="head">
                        <div class="icon"><i class="icosg-star3"></i></div>
                        <h2>Example</h2> 
                        <div class="items">
                            <div class="rating" id="rate_box_head">
                                <a href="#" class="star active tip" title="1"></a>
                                <a href="#" class="star active tip" title="2"></a>
                                <a href="#" class="star active tip" title="3"></a>
                                <a href="#" class="star tip" title="4"></a>
                                <a href="#" class="star tip" title="5"></a>
                            </div>                              
                        </div>
                    </div>
                    <div class="block">
                        Sample rating in box head.
                    </div>
                </div>                
                
            </div>
            
            <div class="col-md-4">

                <div class="widget">
                    <div class="head">
                        <div class="icon"><i class="icosg-star3"></i></div>
                        <h2>Example</h2>                        
                        <div class="items" style="width: 100px;">
                            <div class="progress small">
                                <div class="progress-bar progress-bar-warning tip" style="width: 70%;" data-original-title="70%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        Sample progress bar in box head.
                    </div>
                </div>                
                
            </div>
            
            <div class="col-md-4">

                <div class="widget">
                    <div class="head">
                        <div class="icon"><i class="icosg-star3"></i></div>
                        <h2>Example</h2>                        
                        <div class="items">
                            <span class="label label-info">Example text</span>
                        </div>
                    </div>
                    <div class="block">
                        Sample label in box head.
                    </div>
                </div>                  
                
            </div>
            
        </div>                        
        
        <div class="row">
            
            <div class="col-md-4">
                
                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-star3"></i></div>
                        <h2>Example dark</h2> 
                        <div class="items">
                            <div class="rating" id="rate_box_head2">
                                <a href="#" class="star active tip" title="1"></a>
                                <a href="#" class="star active tip" title="2"></a>
                                <a href="#" class="star active tip" title="3"></a>
                                <a href="#" class="star tip" title="4"></a>
                                <a href="#" class="star tip" title="5"></a>
                            </div>                              
                        </div>
                    </div>
                    <div class="block">
                        Sample rating in dark box head.
                    </div>
                </div>                
                
            </div>
            
            <div class="col-md-4">

                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-star3"></i></div>
                        <h2>Example dark</h2>                        
                        <div class="items" style="width: 100px;">
                            <div class="progress small">
                                <div class="progress-bar progress-bar-warning tip" style="width: 70%;" data-original-title="70%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        Sample progress bar in dark box head.
                    </div>
                </div>                
                
            </div>
            
            <div class="col-md-4">

                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-star3"></i></div>
                        <h2>Example dark</h2>                        
                        <div class="items">
                            <span class="label label-info">Example text</span>
                        </div>
                    </div>
                    <div class="block">
                        Sample label in dark box head.
                    </div>
                </div>                  
                
            </div>
            
        </div>

        <div class="row">
            
            <div class="col-md-4">
                
                <div class="widget">
                    <div class="head simple">                        
                        <h2>Example Simple</h2> 
                        <div class="items">
                            <div class="rating" id="rate_box_head3">
                                <a href="#" class="star active tip" title="1"></a>
                                <a href="#" class="star active tip" title="2"></a>
                                <a href="#" class="star active tip" title="3"></a>
                                <a href="#" class="star tip" title="4"></a>
                                <a href="#" class="star tip" title="5"></a>
                            </div>                              
                        </div>
                    </div>
                    <div class="block">
                        Sample rating in box head.
                    </div>
                </div>                
                
            </div>
            
            <div class="col-md-4">

                <div class="widget">
                    <div class="head simple">
                        <h2>Example Simple</h2>                        
                        <div class="items" style="width: 100px;">
                            <div class="progress small">
                                <div class="progress-bar progress-bar-warning tip" style="width: 70%;" data-original-title="70%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        Sample progress bar in box head.
                    </div>
                </div>                
                
            </div>
            
            <div class="col-md-4">

                <div class="widget">
                    <div class="head simple">
                        <h2>Example</h2>                        
                        <div class="items">
                            <span class="label label-info">Example text</span>
                        </div>
                    </div>
                    <div class="block">
                        Sample label in box head.
                    </div>
                </div>                  
                
            </div>
            
        </div>        
        
        <div class="row">
            
            <div class="col-md-4">
                
                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-star3"></i></div>
                        <h2>Collapsible</h2> 
                        <ul class="buttons">                                                        
                            <li><a href="#" class="cblock"><span class="icos-menu"></span></a></li>
                        </ul>                         
                    </div>
                    <div class="block">
                        Sample collapsible block.
                    </div>
                </div>                
                
            </div>
            
            <div class="col-md-4">

                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-star3"></i></div>
                        <h2>Collapsible</h2>                        
                        <ul class="buttons">                                                        
                            <li><a href="#" class="cblock"><span class="icos-menu"></span></a></li>
                        </ul>  
                    </div>
                    <div class="block" style="display: none;">
                        Sample collapsible closed block.
                    </div>
                </div>                
                
            </div>
            
            <div class="col-md-4">

                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-star3"></i></div>
                        <h2>Collapsible</h2>                        
                        <ul class="buttons">                                                        
                            <li><a href="#" class="cblock"><span class="icos-menu"></span></a></li>
                        </ul>
                    </div>
                    <div class="block" data-collapse="eblock_1">
                        Collapsible block with cookies control.
                    </div>
                </div>                  
                
            </div>
            
        </div>        
        
    </div>

</body>
</html>